
<template>
  <main-container :headerText="'会员管理 >> 用户信息详情'">
    <div class="content">
      <div class="edit-wrap">
        <div class="top-input">
          <div class="item">
            <label for>用户昵称:</label>
            <div class="inline-block">{{ formData.nickName }}</div>
          </div>

          <div class="item">
            <label for>认证所在地:</label>
            <div class="inline-block">{{ formData.addr }}</div>
          </div>

          <div class="item">
            <label for>域:</label>
            <div class="inline-block">{{ formData.domain }}</div>
          </div>

          <div class="item">
            <label for>会员等级名称:</label>
            <div class="inline-block">{{ formData.grade }}</div>
          </div>

          <div class="item">
            <label for>创客名称:</label>
            <div class="inline-block">{{ formData.guestName }}</div>
          </div>

          <div class="item img-item">
            <label for>头像图片地址:</label>
            <div class="inline-block">
              <div class="img-box">
                <el-image
                  style="height: 100%"
                  :src="formData.headUrl"
                  :preview-src-list="[formData.headUrl]"
                >
                </el-image>
              </div>
            </div>
          </div>

          <div class="item">
            <label for>邀请id:</label>
            <div class="inline-block">{{ formData.myInviterId }}</div>
          </div>

          <div class="item">
            <label for>我的推荐码:</label>
            <div class="inline-block">{{ formData.myRecommendCode }}</div>
          </div>

          <div class="item">
            <label for>我的推荐码:</label>
            <div class="inline-block">{{ formData.myRecommendCode }}</div>
          </div>

          <div class="item">
            <label for>直推人id:</label>
            <div class="inline-block">{{ formData.mySuperior }}</div>
          </div>

          <div class="item">
            <label for>手机号:</label>
            <div class="inline-block">{{ formData.phone }}</div>
          </div>

          <div class="item img-item">
            <label for>分享二维码:</label>
            <div class="inline-block">
              <div class="img-box">
                <el-image
                  style="height: 100%"
                  :src="formData.qrcode"
                  :preview-src-list="[formData.qrcode]"
                >
                </el-image>
              </div>
            </div>
          </div>

          <div class="item">
            <label for>推荐人电话:</label>
            <div class="inline-block">{{ formData.recommendPhone }}</div>
          </div>

          <div class="item">
            <label for>更新时间:</label>
            <div class="inline-block">{{ formData.updateDate }}</div>
          </div>

          <div class="item">
            <label for>使用状态:</label>
            <div class="inline-block">{{ stateShow[formData.state] }}</div>
          </div>

          <!-- 银行卡信息 -->
          <div class="item table-wrap">
            <div class="t-title">银行卡信息</div>
            <div class="table-info">
              <div class="t-item">
                <div class="li">银行名称</div>
                <div class="li">银行支行</div>
                <div class="li">银行卡号</div>
              </div>
              <div v-if="addrList.length > 0">
                <div
                  class="t-item"
                  v-for="(item, index) in bankCardList"
                  :key="index"
                >
                  <div class="li ellipsis">{{ item.bName }}</div>
                  <div class="li ellipsis">{{ item.bBank }}</div>
                  <div class="li ellipsis">{{ item.bCard }}</div>
                </div>
              </div>

              <div class="no-data-tips" v-else>—— 暂无信息 ——</div>
            </div>
          </div>

          <!-- 收货人信息 -->
          <div class="item table-wrap">
            <div class="t-title">收货地址信息</div>
            <div class="table-info">
              <div class="t-item">
                <div class="li">收货人</div>
                <div class="li">联系方式</div>
                <div class="li">收货地址</div>
              </div>

              <div v-if="addrList.length > 0">
                <div
                  class="t-item"
                  v-for="(item, index) in addrList"
                  :key="index"
                >
                  <div class="li ellipsis">{{ item.rPeople }}</div>
                  <div class="li ellipsis">{{ item.rTel }}</div>
                  <div class="li ellipsis">{{ item.rAddr }}</div>
                </div>
              </div>

              <div class="no-data-tips" v-else>—— 暂无信息 ——</div>
            </div>
          </div>
        </div>
      </div>

      <div class="submit-option">
        <el-button @click="handleGoBack" size="small" type="primary"
          >返回</el-button
        >
      </div>
    </div>
  </main-container>
</template>


<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";
import upload_img from "@/components/subCon/upload_img";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
    "upload-img": upload_img,
  },
  props: {},
  data() {
    return {
      formData: {
        nickName: "",
        addr: "",
        domain: "",
        grade: "",
        guestName: "",
        headUrl: "",
        myInviterId: "",
        myRecommendCode: "",
        myRecommendCode: "",
        mySuperior: "",
        phone: "",
        qrcode: "",
        recommendPhone: "",
        updateDate: "",
        state: "",
      },
      stateShow: {
        0: "停用",
        1: "使用",
      },

      allMethods: "",

      addrList: [],
      bankCardList: [],

      isMock: false,
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();

    const id = this.$route.query.id;
    this.getDetailData(id);

    this.getAddrF();
    this.getBankCardF();
  },
  methods: {
    /* 获取地址 */
    getAddrF() {
      this.tools.baseGet({
        url: this.api.member_m.user_addr,
        params: {
          userId: this.$route.query.id,
        },
        success: (res) => {
          if (res.code == 200 && res.data.records.length > 0) {
            this.addrList = res.data.records;
          } else if (this.isMock) {
            this.addrList = [
              {
                rPeople: "123",
                rTel: "123",
                rAddr: "qwer",
              },
            ];
          }
        },
        fail: (err) => {
          if (this.isMock) {
            this.addrList = [
              {
                rPeople: "123",
                rTel: "123",
                rAddr: "123",
              },
            ];
          }
        },
      });
    },

    /* 获取银行卡 */
    getBankCardF() {
      this.tools.baseGet({
        url: this.api.member_m.user_bank_card,
        params: {
          userId: this.$route.query.id,
        },
        success: (res) => {
          if (res.code == 200 && res.data.records.length > 0) {
            this.bankCardList = res.data.records;
          } else if (this.isMock) {
            this.bankCardList = [
              {
                bName: "123",
                bBank: "123",
                bCard: "123",
              },
            ];
          }
        },
        fail: (err) => {
          if (this.isMock) {
            this.bankCardList = [
              {
                bName: "123",
                bBank: "123",
                bCard: "123",
              },
            ];
          }
        },
      });
    },

    //获取编辑数据
    getDetailData(id) {
      let url = API.member_m.user_detail;
      let data = {
        id: id,
      };
      console.log("参数", data);
      jhTools.get(
        url,
        null,
        data,
        (res) => {
          console.log("结果", res);
          if (res.code == 200) {
            this.formData = res.data;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    //返回
    handleGoBack() {
      this.$router.go(-1);
    },
    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {};
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

/* 操作栏相关*/

.content {
  min-height: 100%;
}

.top-option {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  margin: 0 30px;
  padding: 10px 0;

  .left-box {
    padding-left: 30px;
    max-width: 900px;

    .sub {
      float: left;
      width: 200px;
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  .right-box {
    padding-right: 30px;
    // min-width: 300px;

    .sub {
      float: right;
      margin-left: 10px;
      margin-top: 10px;
    }
  }
}

/* 操作栏相关*/

/* 输入*/
.edit-wrap {
  padding: 40px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;

  label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .tips {
    color: #f10215;
  }
  //标题
  .title {
    height: 46px;
    font-size: 14px;
    padding-left: 20px;
    font-weight: bold;
    line-height: 46px;
  }

  .top-input {
    .item {
      margin-top: 10px;

      &.img-item {
        display: flex;
        flex-direction: row;
      }
    }
  }

  .submit-option {
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

//调整element 样式
.inline-block {
  display: inline-block;
  margin-left: 22px;
  &.id {
    padding-left: 20px;
  }

  el-input {
    width: 20px !important;
  }
}

//详情图片
.img-item {
  display: flex;
  flex-direction: row;
  .img-box {
    width: 160px;
    img {
      width: 100%;
    }
  }
}

//按钮
.submit-option {
  width: 300px;
  padding-top: 30px;
  padding-bottom: 60px;
  padding-left: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 上传按钮样式*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 107px;
  height: 107px;
  line-height: 107px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.avatar {
  width: 107px;
  height: 107px;
  display: block;
}

/* 列表信息展示 */
.table-wrap {
  padding-left: 45px;
  font-size: 14px;
  .table-info {
    width: 800px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    .t-item {
      display: flex;
      justify-content: center;
      align-content: center;
      .li {
        width: 33.33%;
        text-align: left;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 5px;
        padding-left: 20px;
        font-size: 12px;
      }
    }
  }

  .t-title {
    font-weight: bold;
    font-size: 14px;
    padding: 10px 0;
  }

  .no-data-tips {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    font-size: 12px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
}

/* 单行省略 */
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>